/* Transition

-------------------------- */

$-transition-all: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
$-transition-fade: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
$-transition-fade-linear: opacity 200ms linear !default;
$-transition-fade-md: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
$-transition-border-base: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
$-transition-color-base: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !default;

/* Color
-------------------------- */
/// color|1|Brand Color|0
$-color-primary: #2672ff !default;
/// color|1|Background Color|4
$-color-white: #ffffff !default;
/// color|1|Background Color|4
$-color-black: #000000 !default;
$-color-primary-light-1: mix($-color-white, $-color-primary, 10%) !default; /* 53a8ff */
$-color-primary-light-2: mix($-color-white, $-color-primary, 20%) !default; /* 66b1ff */
$-color-primary-light-3: mix($-color-white, $-color-primary, 30%) !default; /* 79bbff */
$-color-primary-light-4: mix($-color-white, $-color-primary, 40%) !default; /* 8cc5ff */
$-color-primary-light-5: mix($-color-white, $-color-primary, 50%) !default; /* a0cfff */
$-color-primary-light-6: mix($-color-white, $-color-primary, 60%) !default; /* b3d8ff */
$-color-primary-light-7: mix($-color-white, $-color-primary, 70%) !default; /* c6e2ff */
$-color-primary-light-8: mix($-color-white, $-color-primary, 80%) !default; /* d9ecff */
$-color-primary-light-9: mix($-color-white, $-color-primary, 90%) !default; /* ecf5ff */

/// color|1|Functional Color|1
$-color-success: #67c23a !default;
/// color|1|Functional Color|1
$-color-warning: #e6a23c !default;
/// color|1|Functional Color|1
$-color-danger: #fc6969 !default;
/// color|1|Functional Color|1
$-color-info: #909399 !default;

$-color-success-light: mix($-color-white, $-color-success, 80%) !default;
$-color-warning-light: mix($-color-white, $-color-warning, 80%) !default;
$-color-danger-light: mix($-color-white, $-color-danger, 80%) !default;
$-color-info-light: mix($-color-white, $-color-info, 80%) !default;

$-color-success-lighter: mix($-color-white, $-color-success, 90%) !default;
$-color-warning-lighter: mix($-color-white, $-color-warning, 90%) !default;
$-color-danger-lighter: mix($-color-white, $-color-danger, 90%) !default;
$-color-info-lighter: mix($-color-white, $-color-info, 90%) !default;

/// color|1|Font Color|2
$-color-text-primary: #303133 !default;
/// color|1|Font Color|2
$-color-text-regular: #606266 !default;
/// color|1|Font Color|2
$-color-text-secondary: #909399 !default;
/// color|1|Font Color|2
$-color-text-placeholder: #c0c4cc !default;

/// color|1|Border Color|3
$-border-color-base: #dcdfe6 !default;
/// color|1|Border Color|3
$-border-color-light: #e4e7ed !default;
/// color|1|Border Color|3
$-border-color-lighter: #ebeef5 !default;
/// color|1|Border Color|3
$-border-color-extra-light: #f2f6fc !default;

// Background
/// color|1|Background Color|4
$-background-color-base: #f5f7fa !default;

/* Link
-------------------------- */
$-link-color: $-color-primary-light-2 !default;
$-link-hover-color: $-color-primary !default;

/* Border
-------------------------- */
$-border-width-base: 1px !default;
$-border-style-base: solid !default;
$-border-color-hover: $-color-text-placeholder !default;
$-border-base: $-border-width-base $-border-style-base $-border-color-base !default;
/// borderRadius|1|Radius|0
$-border-radius-base: 4px !default;
/// borderRadius|1|Radius|0
$-border-radius-small: 2px !default;
/// borderRadius|1|Radius|0
$-border-radius-circle: 100% !default;
/// borderRadius|1|Radius|0
$-border-radius-zero: 0 !default;

// Box-shadow
/// boxShadow|1|Shadow|1
$-box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04) !default;
// boxShadow|1|Shadow|1
$-box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12) !default;
/// boxShadow|1|Shadow|1
$-box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;

$-box-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05) !default;

$-box-shadow-page: 0 0 10px 0 rgba(0, 0, 0, 0.16) !default;

// shadow-sm	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
// shadow	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
// shadow-md	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
// shadow-lg	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
// shadow-xl	box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
// shadow-2xl	box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);

/* Fill
-------------------------- */
$-fill-base: $-color-white !default;

/* Typography
-------------------------- */
$-font-path: 'fonts' !default;
$-font-display: 'auto' !default;
/// fontSize|1|Font Size|0
$-font-size-extra-large: 20px !default;
/// fontSize|1|Font Size|0
$-font-size-large: 18px !default;
/// fontSize|1|Font Size|0
$-font-size-medium: 16px !default;
/// fontSize|1|Font Size|0
$-font-size-base: 14px !default;
/// fontSize|1|Font Size|0
$-font-size-small: 13px !default;
/// fontSize|1|Font Size|0
$-font-size-extra-small: 12px !default;
/// fontWeight|1|Font Weight|1
$-font-weight-primary: 500 !default;
/// fontWeight|1|Font Weight|1
$-font-weight-secondary: 100 !default;
/// fontLineHeight|1|Line Height|2
$-font-line-height-primary: 24px !default;
/// fontLineHeight|1|Line Height|2
$-font-line-height-secondary: 16px !default;
$-font-color-disabled-base: #bbb !default;
/* Size
-------------------------- */
$-size-base: 14px !default;

/* z-index
-------------------------- */
$-index-normal: 1 !default;
$-index-top: 1000 !default;
$-index-popper: 2000 !default;

/* Disable base
-------------------------- */
$-disabled-fill-base: $-background-color-base !default;
$-disabled-color-base: $-color-text-placeholder !default;
$-disabled-border-base: $-border-color-light !default;

/* Icon
-------------------------- */
$-icon-color: #666 !default;
$-icon-color-base: $-color-info !default;

/* Result
-------------------------- */
$-result-padding: 40px 30px !default;
$-result-icon-font-size: 64px !default;
$-result-title-font-size: 20px !default;
$-result-title-margin-top: 20px !default;
$-result-subtitle-margin-top: 10px !default;
$-result-extra-margin-top: 30px !default;
$-result-info-color: $-color-info !default;
$-result-success-color: $-color-success !default;
$-result-warning-color: $-color-warning !default;
$-result-danger-color: $-color-danger !default;

/* Break-point
--------------------------*/
$-sm: 768px !default;
$-md: 992px !default;
$-lg: 1200px !default;
$-xl: 1920px !default;

$-breakpoints: (
  'xs': (
    max-width: $-sm - 1,
  ),
  'sm': (
    min-width: $-sm,
  ),
  'md': (
    min-width: $-md,
  ),
  'lg': (
    min-width: $-lg,
  ),
  'xl': (
    min-width: $-xl,
  ),
);

$-breakpoints-spec: (
  'xs-only': (
    max-width: $-sm - 1,
  ),
  'sm-and-up': (
    min-width: $-sm,
  ),
  'sm-only': '(min-width: #{$-sm}) and (max-width: #{$-md - 1})',
  'sm-and-down': (
    max-width: $-md - 1,
  ),
  'md-and-up': (
    min-width: $-md,
  ),
  'md-only': '(min-width: #{$-md}) and (max-width: #{$-lg - 1})',
  'md-and-down': (
    max-width: $-lg - 1,
  ),
  'lg-and-up': (
    min-width: $-lg,
  ),
  'lg-only': '(min-width: #{$-lg}) and (max-width: #{$-xl - 1})',
  'lg-and-down': (
    max-width: $-xl - 1,
  ),
  'xl-only': (
    min-width: $-xl,
  ),
);
